<!-- 模板部分，用于定义页面的结构 -->
<template>
	<!-- view标签是uni-app中用于构建页面视图的基础组件，类似HTML中的div标签，这里class="content"用于给该view添加一个名为content的样式类 -->
	<view class="content">
		<!-- image标签用于展示图片，class="logo"给该图片添加名为logo的样式类，src="/static/logo.png"指定了图片的路径，即从项目的static文件夹下查找名为logo.png的图片来显示 -->
		<image class="logo" src="/static/logo.png"></image>
		<!-- 又是一个view标签，用于构建页面中的一块视图区域，class="text-area"添加名为text-area的样式类 -->
		<view class="text-area">
			<!-- text标签用于显示文本内容，class="title"添加名为title的样式类，{{title}}是插值表达式，用于绑定data中定义的title数据，会将对应的数据渲染显示在这里 -->
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		// data函数用于返回页面所需的数据，这里返回一个对象，对象中的属性可以在模板中通过插值表达式等方式使用
		data() {
			return {
				// 定义了一个名为title的数据属性，其值为'张久军'，这个值会被渲染到模板中对应的{{title}}插值表达式处
				title: '张久军'
			}
		},
		// onLoad生命周期钩子函数，在页面加载时触发，这里暂时没有具体的逻辑代码，可用于初始化页面相关数据、发起网络请求等操作
		onLoad() {
			//debugger
		},
		// methods对象用于定义页面中的各种方法，比如事件处理函数等，这里暂时没有定义具体的方法
		methods: {

		}
	}
</script>

<style>
	/* 为名为content的样式类设置样式规则 */
	.content {
		/* 设置该元素的布局方式为弹性布局（flex布局） */
		display: flex;
		/* 设置弹性布局的主轴方向为垂直方向（列方向） */
		flex-direction: column;
		/* 让子元素在主轴方向上居中对齐 */
		align-items: center;
		/* 让子元素在交叉轴方向上居中对齐 */
		justify-content: center;
	}

	/* 为名为logo的样式类设置样式规则 */
	.logo {
		/* 设置图片的高度为200rpx（rpx是uni-app中的自适应单位，可根据屏幕宽度等比例缩放） */
		height: 200rpx;
		/* 设置图片的宽度为200rpx */
		width: 200rpx;
		/* 设置图片距离顶部的外边距为200rpx */
		margin-top: 200rpx;
		/* 设置图片水平方向上自动外边距，使其在水平方向居中 */
		margin-left: auto;
		margin-right: auto;
		/* 设置图片距离底部的外边距为50rpx */
		margin-bottom: 50rpx;
	}

	/* 为名为text-area的样式类设置样式规则 */
	.text-area {
		/* 设置该元素的布局方式为弹性布局（flex布局） */
		display: flex;
		/* 让子元素在主轴方向上居中对齐 */
		justify-content: center;
	}

	/* 为名为title的样式类设置样式规则 */
	.title {
		/* 设置文本的字体大小为36rpx */
		font-size: 36rpx;
		/* 设置文本的颜色为#8f8f94（十六进制颜色值） */
		color: #8f8f94;
	}
</style>